import React, { Component } from 'react'
import axios from 'axios'
import './movieList.css'
export default class LifeCycle extends Component {
  constructor(props){
    super(props)
    this.state={
        movies:[]
    }
  }
  async getAllMovies(){
    const {data:{movies}}=await axios.get('https://www.fastmock.site/mock/4441a79ad5f884f83b784cf4c588bdb6/movies/getHotMovies')
    this.setState(()=>{
      return{
        movies
      }
    })
  }
  componentDidMount(){
    this.getAllMovies()
  }
  findDetail=(item)=>{
    //从子组件中传递一个对象到父组件中来
    this.props.callback(item)
  }
  render() {
    return (
      <div className='container'>
        <div className='box'>
            {
              this.state.movies.map((item,index)=>
              <div className='item' key={index} onClick={()=>{this.findDetail(item)}}>
                  <div className='item-top'>
                    <img src={item.imgSrc} alt="" />
                  </div>
                  <div className='item-bottom'></div>
              </div>)
            }
        </div>
      </div>
    )
  }
}
